<template>
    <div class="order-page">
        <el-table :data="orders" stripe>
            <el-table-column prop="orderId" label="订单号"></el-table-column>
            <el-table-column prop="consignee" label="收件人"></el-table-column>
            <el-table-column prop="itemName" label="商品名称"></el-table-column>
            <el-table-column prop="address" label="收货地址"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="totalPrice" label="总价"></el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <div :style="scope.row.status === 0 ? 'color: red' : scope.row.status === 1 ? 'color:orange' : 'color:green'">
                        {{ scope.row.status === 0 ? '未发出' : scope.row.status === 1 ? '运输中' : '已到达' }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    mounted() {
        this.showOrders()
    },
    data() {
        return {
            orders: []
        };
    },
    methods: {
        getItemByItemId(ItemId, i, address, count) {
            axios({
                url: `/items/items/${ItemId}`,
                method: 'get',
            }).then(res => {
                console.log(res)
                this.$set(this.orders[i], 'price', res.data.data.price)
                this.$set(this.orders[i], 'itemName', res.data.data.itemName)
                this.$set(this.orders[i], 'address', address)
                this.$set(this.orders[i], 'totalPrice', (Number)(res.data.data.price) * (Number)(count))
            })
        },
        showOrders() {
            // 在此处添加取消订单的逻辑
            axios({
                url: "/orders",
                methods: 'get',
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then(res => {
                for (let i = 0; i < res.data.data.length; i++) {
                    this.address = res.data.data[i].consigneeProvince + res.data.data[i].consigneeCity + res.data.data[i].consigneeDistrict + res.data.data[i].consigneeDetialedAddress + ''
                    this.count = res.data.data[i].count

                    this.getItemByItemId(res.data.data[i].itemId, i, this.address, this.count)
                }
                this.orders = res.data.data
                console.log(res)
            })
        },

    }
};
</script>

<style scoped>
.order-page {
    padding: 20px;
}
</style>